<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/inner/head.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
<!--
body {
	margin-left: 3px;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 0px;
}
.STYLE1 {
	color: #e1e2e3;
	font-size: 12px;
}
.STYLE6 {color: #000000; font-size: 12; }
.STYLE10 {color: #000000; font-size: 12px; }
.STYLE19 {
	color: #344b50;
	font-size: 12px;
}
.STYLE21 {
	font-size: 12px;
	color: #3b6375;
}
.STYLE22 {
	font-size: 12px;
	color: #295568;
}
.fu_list {
	width:600px;
	background:#ebebeb;
	font-size:12px;
}
.fu_list td {
	padding:5px;
	line-height:20px;
	background-color:#fff;
}
.fu_list table {
	width:100%;
	border:1px solid #ebebeb;
}
.fu_list thead td {
	background-color:#f4f4f4;
}
.fu_list b {
	font-size:14px;
}
/*file容器样式*/
a.files {
	width:90px;
	height:30px;
	overflow:hidden;
	display:block;
	border:1px solid #BEBEBE;
	background:url(${basepath}/res/image/fu_btn.gif) left top no-repeat;
	text-decoration:none;
}
a.files:hover {
	background-color:#FFFFEE;
	background-position:0 -30px;
}
/*file设为透明，并覆盖整个触发面*/
a.files input {
	margin-left:-350px;
	font-size:30px;
	cursor:pointer;
	filter:alpha(opacity=0);
	opacity:0;
}
/*取消点击时的虚线框*/
a.files, a.files input {
	outline:none;/*ff*/
	hide-focus:expression(this.hideFocus=true);/*ie*/
}
-->
</style>
<script>
	$(document).ready(function() {
      	setNoPageBarDivHeight();
  	});
  	function cz(){
  		document.getElementById("productform").reset();
  		fu.Clear();
  	}
	function add(){
		//显示图片列表
		var arrRows = [];
		Each(fu.Files, function(o){ arrRows.push([o.value, "&nbsp;"]); });
		AddList(arrRows);
	
		fu.Folder.style.display = "none";
		$("idProcess").style.display = "";
		$("idMsg").innerHTML = "正在保存图片，请稍候……<br />有可能因为网络问题，出现程序长时间无响应，请点击<a href='javascript:cacel();'><font color='red'>取消</font></a>”重新上传图片";
		fu.Form.submit();
	}
	function cacel(){
		fu.Folder.style.display = "";
		$("idProcess").style.display = "none";
		$("idMsg").innerHTML ="<img src='${basepath}/res/image/tj.jpg' width='59' height='22' onclick='add();' title='提交' style='cursor: pointer;'><img src='${basepath}/res/image/cz.jpg' width='59' height='22' onclick='cz();' title='重置' style='cursor: pointer;'>"
	}
	
	function Finish(msg){
		jError(msg);
		fu.Folder.style.display = "";
		$("idProcess").style.display = "none";
		$("idMsg").innerHTML ="<img src='${basepath}/res/image/tj.jpg' width='59' height='22' onclick='add();' title='提交' style='cursor: pointer;'><img src='${basepath}/res/image/cz.jpg' width='59' height='22' onclick='cz();' title='重置' style='cursor: pointer;'>"
	}
</script>
</head>
<body>
  <form id="pictureform" name="pictureform" enctype="multipart/form-data" action="${basepath}/productgeneral?m=addPic">
  <input name="id" id="id" value="${product.id}" type="hidden">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
  	<tr>
      <td height="30">
      	<table width="100%" border="0" cellspacing="0" cellpadding="0">
      	  <tr>
        	<td height="24" bgcolor="#353c44">
        	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
          	    <tr>
            	  <td>
            	    <table width="100%" border="0" cellspacing="0" cellpadding="0">
              		  <tr>
                	    <td width="2%" height="19" valign="bottom"><div align="center"><img src="${basepath}/res/image/tb.gif" width="14" height="14" /></div></td>
                	    <td width="98%" valign="bottom"><span class="STYLE1"> 添加图片</span></td>
              		  </tr>
            	    </table>
            	  </td>
          	    </tr>
        	  </table>
            </td>
      	  </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <div id="dataDiv" class="scrollDiv" >
      	<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
       	  <tr>
        	<td height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">产品名称：</td>
        	<td width="30%" bgcolor="#FFFFFF" class="STYLE19" align="left">&nbsp;${product.name}</td>
        	<td width="20%" height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">产品编号：</td>
        	<td width="30%" bgcolor="#FFFFFF" class="STYLE19" align="left">&nbsp;${product.pno}</td>
      	  </tr>
      	  <tr>
        	<td height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">产品材料：</td>
        	<td bgcolor="#FFFFFF" class="STYLE19" align="left">&nbsp;${product.material}</td>
        	<td height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">产品规格：</td>
        	<td bgcolor="#FFFFFF" class="STYLE19" align="left">&nbsp;${product.volume}</td>
      	  </tr>
      	  <tr>
        	<td height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">是否公开：</td>
        	<td bgcolor="#FFFFFF" class="STYLE19" align="left" colspan="3">&nbsp;${product.pub==1?'公开':'不公开'}</td>
      	  </tr>
      	  <tr>
        	<td width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">产品描述：</td>
        	<td bgcolor="#FFFFFF" class="STYLE19" align="left" colspan="3">&nbsp;${product.describes}</td>
      	  </tr>
      	  <tr>
        	<td height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">添加图片：</td>
        	<td bgcolor="#FFFFFF" class="STYLE19" align="left" colspan="3">&nbsp;<a href="javascript:void(0);" class="files" id="idFile"></a><img id="idProcess" style="display:none;" src="${basepath }/res/image/loading.gif" /><br/><font color="red">温馨提示：最多可同时上传 <b id="idLimit"></b> 个图片，只允许上传 <b id="idExt"></b> 图片。</font></td>
      	  </tr>
      	  <tr>
        	<td height="30" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="right">图片路径：</td>
        	<td bgcolor="#FFFFFF" style="color: #344p50;font-size: 14px;" align="left" colspan="3">&nbsp;
        	  <table>
        		<tbody id="idFileList"></tbody>
        	  </table>
        	</td>
      	  </tr>
      	  <tr>
        	<td height="100" width="20%" bgcolor="#FFFFFF" class="STYLE19" align="center" colspan="4" id="idMsg"> 
        	  <img src="${basepath}/res/image/tj.jpg" width="59" height="22" onclick="add();" title="提交" style="cursor: pointer;">
        	  <img src="${basepath}/res/image/cz.jpg" width="59" height="22" onclick="cz();" title="重置" style="cursor: pointer;">
        	</td>
      	  </tr>
  		</table>
  		</div>
  	  </td>
  	</tr>
  </table>
  </form>
	<script type="text/javascript">

	var isIE = (document.all) ? true : false;

	var $ = function (id) {
    	return "string" == typeof id ? document.getElementById(id) : id;
	};

	var Class = {
  		create: function() {
    		return function() {
      			this.initialize.apply(this, arguments);
    		}
  		}
	}

	var Extend = function(destination, source) {
		for (var property in source) {
			destination[property] = source[property];
		}
	}

	var Bind = function(object, fun) {
		return function() {
			return fun.apply(object, arguments);
		}
	}

	var Each = function(list, fun){
		for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
	};

	//图片上传类
	var FileUpload = Class.create();
	FileUpload.prototype = {
 		//表单对象，图片控件存放空间
 		initialize: function(form, folder, options) {

			this.Form = $(form);//表单
			this.Folder = $(folder);//图片控件存放空间
			this.Files = [];//图片集合
	
			this.SetOptions(options);
	
			this.FileName = this.options.FileName;
			this._FrameName = this.options.FrameName;
			this.Limit = this.options.Limit;
			this.Distinct = !!this.options.Distinct;
			this.ExtIn = this.options.ExtIn;
			this.ExtOut = this.options.ExtOut;
	
			this.onIniFile = this.options.onIniFile;
			this.onEmpty = this.options.onEmpty;
			this.onNotExtIn = this.options.onNotExtIn;
			this.onExtOut = this.options.onExtOut;
			this.onLimite = this.options.onLimite;
			this.onSame = this.options.onSame;
			this.onFail = this.options.onFail;
			this.onIni = this.options.onIni;
	
			if(!this._FrameName){
			//为每个实例创建不同的iframe
			this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
			//ie不能修改iframe的name
			var oFrame = isIE ? document.createElement("<iframe name=\"" + this._FrameName + "\">") : document.createElement("iframe");
			//为ff设置name
			oFrame.name = this._FrameName;
			oFrame.style.display = "none";
			//在ie文档未加载完用appendChild会报错
			document.body.insertBefore(oFrame, document.body.childNodes[0]);
		}
		
		//设置form属性，关键是target要指向iframe
		this.Form.target = this._FrameName;
		this.Form.method = "post";
		//注意ie的form没有enctype属性，要用encoding
		this.Form.encoding = "multipart/form-data";
	
		//整理一次
		this.Ini();
 	},
 	//设置默认属性
 	SetOptions: function(options) {
   	this.options = {//默认值
		FileName:	"filename",//图片上传控件的name，配合后台使用
		FrameName:	"",//iframe的name，要自定义iframe的话这里设置name
		onIniFile:	function(){},//整理图片时执行(其中参数是file对象)
		onEmpty:	function(){},//图片空值时执行
		Limit:		10,//图片数限制，0为不限制
		onLimite:	function(){},//超过图片数限制时执行
		Distinct:	true,//是否不允许相同图片
		onSame:		function(){},//有相同图片时执行
		ExtIn:		["gif","jpg","jpeg","swf","png"],//允许后缀名
		onNotExtIn:	function(){},//不是允许后缀名时执行
		ExtOut:		[],//禁止后缀名，当设置了ExtIn则ExtOut无效
		onExtOut:	function(){},//是禁止后缀名时执行
		onFail:		function(){},//图片不通过检测时执行(其中参数是file对象)
		onIni:		function(){}//重置时执行
   	};
   	Extend(this.options, options || {});
 	},
 	//整理空间
 	Ini: function() {
	//整理图片集合
	this.Files = [];
	//整理图片空间，把有值的file放入图片集合
	Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
		if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
	}))
	//插入一个新的file
	var file = document.createElement("input");
	file.name = this.FileName; file.type = "file"; file.onchange = Bind(this, function(){ this.Check(file); this.Ini(); });
	this.Folder.appendChild(file);
	//执行附加程序
	this.onIni();
 	},
 	//检测file对象
 	Check: function(file) {
	//检测变量
	var bCheck = true;
	//空值、图片数限制、后缀名、相同图片检测
	if(!file.value){
		bCheck = false; this.onEmpty();
	} else if(this.Limit && this.Files.length >= this.Limit){
		bCheck = false; this.onLimite();
	} else if(!!this.ExtIn.length && !RegExp("\.(" + this.ExtIn.join("|") + ")$", "i").test(file.value)){
		//检测是否允许后缀名
		bCheck = false; this.onNotExtIn();
	} else if(!!this.ExtOut.length && RegExp("\.(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
		//检测是否禁止后缀名
		bCheck = false; this.onExtOut();
	} else if(!!this.Distinct) {
		Each(this.Files, function(o){ if(o.value == file.value){ bCheck = false; } })
		if(!bCheck){ this.onSame(); }
	}
	//没有通过检测
	!bCheck && this.onFail(file);
 	},
  	//删除指定file
  	Delete: function(file) {
		//移除指定file
		this.Folder.removeChild(file); this.Ini();
  	},
  	//删除全部file
  	Clear: function() {
		//清空图片空间
		Each(this.Files, Bind(this, function(o){ this.Folder.removeChild(o); })); this.Ini();
  	}
	}

var fu = new FileUpload("pictureform", "idFile", { 
	onIniFile: function(file){ file.value ? file.style.display = "none" : this.Folder.removeChild(file); },
	onEmpty: function(){ jError("请选择一个图片"); },
	onLimite: function(){ jError("超过上传限制"); },
	onSame: function(){ jError("已经有相同图片"); },
	onNotExtIn:	function(){ jError("只允许上传" + this.ExtIn.join("，") + "图片"); },
	onFail: function(file){ this.Folder.removeChild(file); },
	onIni: function(){
		//显示图片列表
		var arrRows = [];
		if(this.Files.length){
			var oThis = this;
			Each(this.Files, function(o){
				var a = document.createElement("a"); a.innerHTML = "取消"; a.href = "javascript:void(0);";
				a.onclick = function(){ oThis.Delete(o); return false; };
				arrRows.push([o.value, a]);
			});
		} else { arrRows.push(["<font color='gray'>没有添加图片</font>", "&nbsp;"]); }
		AddList(arrRows);
	}
});


//用来添加图片列表的函数
function AddList(rows){
	//根据数组来添加列表
	var FileList = $("idFileList"), oFragment = document.createDocumentFragment();
	//用文档碎片保存列表
	Each(rows, function(cells){
		var row = document.createElement("tr");
		Each(cells, function(o){
			var cell = document.createElement("td");
			if(typeof o == "string"){ cell.innerHTML = o; }else{ cell.appendChild(o); }
			row.appendChild(cell);
		});
		oFragment.appendChild(row);
	})
	//ie的table不支持innerHTML所以这样清空table
	while(FileList.hasChildNodes()){ FileList.removeChild(FileList.firstChild); }
	FileList.appendChild(oFragment);
	}


	$("idLimit").innerHTML = fu.Limit;

	$("idExt").innerHTML = fu.ExtIn.join("，");

</script>
</body>

